<template>
  <div class="xyt-home">
    <img src="../assets/img/bg-share.png" class="xyt-bg" alt="">
    <div class="xyt-pool" @click="goPool"></div>
    <!-- <div class="xyt-nmc" @click="goNmc"></div> -->
    <div class="xyt-container xyt-container--see">
      <!-- <van-button class="van-block" type="primary" @click="openTaskMessage">立即查看</van-button> -->
      <img src="../assets/img/btn-see.png" class="xyt-btn--see" id="btnSee" alt="" @click="openTaskMessage">
    </div>
    <TalkMessage ref="talkMessage" @replay="replay"></TalkMessage>
    <TalkReplayVue ref="talkReplayVue"></TalkReplayVue>
    <Attention ref="attentionDialog" position="center"></Attention>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import TalkMessage from './../components/talk/TalkMessage.vue'
import TalkReplayVue from '../components/talk/TalkReplay.vue';
import Attention from './../components/Attention.vue'
import { useRouter, useRoute } from "vue-router"
import { useUserInfo } from './../stores/userInfo.js'
import { share } from './../utils/utils.js'

const talkMessage = ref(null)
const talkReplayVue = ref(null)
const attentionDialog = ref(null)
const router = useRouter()

let userInfoStore = useUserInfo()

function openTaskMessage() {
  // 没有关注校长，需先关注
  talkMessage.value.open()
  // if (userInfoStore.isAttention) {
  //   talkMessage.value.open()
  // } else {
  // }
}

onMounted(async () => {
  share({
    title: '象牙塔: 纸飞机大厅',
    desc: '神秘又好玩的纸飞机游戏，快来跟我一起参与吧',
    link: location.href,
    imgUrl: 'https://miai-1310370640.cos.ap-shanghai.myqcloud.com/share_photo/zhifeiji.jpg',
    success: function (res) {
      // 设置成功
    },
    fail: function(error) {
      console.log('error', error)
    }
  })
  anime({
    targets: '#btnSee',
    duration: 2000,
    keyframes: [
      {scale: 1},
      {scale: 1.1},
      {scale: 1}
    ],
    easing: 'cubicBezier(.5, .05, .1, .3)',
    loop: true
  })
})

function replay(params) {
  talkReplayVue.value.open(params)
}

function goPool() {
  router.push({
    path: '/pool'
  })
}
function goNmc() {
  router.push({
    path: '/anonymityPool'
  })
}

</script>
<style lang="scss" scoped>
.xyt-home {
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
}
.xyt-bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.xyt-desc {
  display: block;
  color: #CC19C4;
  margin-bottom: 20px;
}
.xyt-btn--see {
  width: 180px;
}
.xyt-container--see {
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -50%);
  text-align: center;
}
</style>